<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NubeIO Ditto - Sandbox</title>
    <link rel="icon" type="image/png" href="./images/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="./images/favicon-32x32.png" sizes="32x32"/>
    <link rel="icon" type="image/png" href="./images/favicon-96x96.png" sizes="96x96"/>

    <link href="https://fonts.googleapis.com/css?family=Abel&amp;text=0123456789" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        body {
        }

        .ditto-logo {
            width: 3em;
        }

        h1 {
            font-size: 55px;
            color: black;
        }

        body {
            font: 20px Helvetica, sans-serif;
            color: #333;
        }

        a {
            color: #3a8c9a;
            text-decoration: none;
        }

        a:hover {
            color: #333;
            text-decoration: none;
        }

        .stats {
            line-height: 3em;
        }

        .stats-count {
            font: normal 2em Abel;
            color: #3a8c9a;
            font-weight: bold;
            text-align: center;
            margin: 5px;
            clear: left;
            float: left;
            width: 5em;
            background-color: lightgray;
        }

        .stats-count-text {
            padding-left: 1em;
            vertical-align: middle;
        }

        .health {
            background-size: contain;
            height: 30px;
            width: 30px;
            float: left;
        }

        .health-up {
            background-image: url("./images/ditto-sandbox-up.svg");
        }

        .health-down {
            background-image: url("./images/ditto-sandbox-down.svg");
        }

        .health-list li {
            clear: both;
            line-height: 30px;
            padding-bottom: 5px;
        }

        .health-key {
            float: left;
            width: 9em;
        }

        .health-status {
            line-height: 30px;
            padding-left: 1em;
        }
        
        .grafana {
            padding-top: 20px;
        }
    </style>
</head>
<body>

<article>
    <h1><img src="./images/ditto.svg" class="ditto-logo" alt="NubeIO Ditto logo"> - Sandbox</h1>
    <div style="clear: both">
        <p>Welcome to the NubeIO Ditto sandbox.</p>
        <p>
            You can use this sandbox to gather first experiences with the NubeIO Ditto <a href="/apidoc/2">HTTP
            API</a>.<br/> The Swagger UI for exploring the API will require authentication.
        </p>
        <p>
            Visit the Eclipse Ditto <a href="https://www.eclipse.org/ditto/intro-overview.html">documentation</a> in
            order to learn more about the project.
        </p>
        <p>
            Please consider that this sandbox has (very) limited resources - so don't expect a high performance setup.
        </p>
        <h2>Authentication</h2>
        <ul>
            <li>sandbox:111</li>
        </ul>
    </div>
    <h2 style="clear: both">Health</h2>
    <div id="health-content">
    </div>
    <h2>Statistics</h2>
    <div>
        <div class="stats">
            <span id="total-things-count" class="stats-count"></span><span
                class="stats-count-text"> persisted <i>Things</i> in the Ditto sandbox</span>
        </div>
        <div class="stats">
            <span id="hot-things-count" class="stats-count"></span><span class="stats-count-text"> currently "hot" <i>Things</i> (accessed within the last 2 hours) in the Ditto sandbox</span>
        </div>
    </div>
</article>

<script>
    function update_count(selector, count) {
        $(selector).animate({
                                counter: count
                            }, {
                                duration: 3000,
                                easing: 'swing',
                                step: function (now) {
                                    $(this).text(Math.ceil(now));
                                }
                            });
    }

    $.getJSON("/stats/search", function (data) {
        let allThingsCount = data.allThingsCount;
        update_count('#total-things-count', allThingsCount);
    }).fail(function () {
        update_count('#total-things-count', 0);
    });
    $.getJSON("/stats/things", function (data) {
        let hotThingsCount = data.hotThingsCount;
        update_count('#hot-things-count', hotThingsCount);
    }).fail(function () {
        update_count('#hot-things-count', 0);
    });

    function calcHealthStatusClass(status) {
        let healthStatusClass;
        if (status === "UP") {
            healthStatusClass = "health-up";
        } else if (status === "DOWN") {
            healthStatusClass = "health-down";
        } else {
            healthStatusClass = "health-down";
        }
        return healthStatusClass;
    }

    $.getJSON("/status/health", function (data) {
        const keysToIgnore = ['status', 'thing-cache-aware', 'dc-default', 'policy-cache-aware'];
        let overallStatus = data.status;
        $(`<p>
            <span class="health-key"></span>
            <span class="health ${calcHealthStatusClass(overallStatus)}"></span>
            <span class="health-status">${overallStatus}</span>
        </p>`).appendTo("#health-content");

        let items = [];
        $.each(data.children, function (idx, child) {
            if (keysToIgnore.includes(child.label)) {
                // ignore
            } else {
                items.push(`<li>
                    <span class="health-key">${child.label}:</span>
                    <span class="health ${calcHealthStatusClass(child.status)}"></span>
                    <span class="health-status">${child.status}</span>
                </li>`);
            }
        });

        $("<ul/>", {
            "class": "health-list",
            html: items.join("")
        }).appendTo("#health-content");
    }).fail(function () {
        $(`<p>
            <span class="health-key"></span>
            <span class="health health-down"></span>
            <span class="health-status">COULD NOT BE DETERMINED</span>
        </p>`).appendTo("#health-content");
    })
</script>
</body>
</html>
